<template>
	<view class="order-item">
		<view class="oi-header">
			<view>
				<u-checkbox v-if="checkbox" :name="orderId" size="18px" icon-size="14px" label-size="28rpx"
					shape="circle" :label="`订单编号：${orderNo}`">
				</u-checkbox>
				<text v-else @click="onClickNo(orderId,id)">订单编号：{{ orderNo }}</text>
			</view>
			<view>
				<text v-if="invoiceState === -1" class="gray">未开票</text>
				<text v-if="invoiceState === 0" class="gray">未开票</text>
				<text v-if="invoiceState === 1" class="blue">开票中</text>
				<text v-if="invoiceState === 2" class="orange">已邮寄</text>
				<text v-if="invoiceState === 3" class="green">开票完成</text>
				<text v-if="invoiceState === 4" class="red">{{ invoiceType==0?'开票失败':'已驳回'}}</text>
			</view>
		</view>
		<view class="oi-body">
			<scroll-view scroll-x="true" style="width: calc(124rpx * 4 + 20rpx * 3)">
				<view class="images">
					<u--image v-for="item in orderItems" :src="item.image" :showLoading="true" width="124rpx"
						height="124rpx">
					</u--image>
					<view class="name" v-if="orderItems.length === 1">
						<u--text size="28rpx" color="#333" :lines="2" :text="orderItems[0].goodsName">
						</u--text>
					</view>
				</view>
			</scroll-view>
			<view>
				<text>共{{ orderItems.length }}件</text>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'order-item',
		props: {
			// 订单id
			orderId: {
				type: [String, Number],
				default: ''
			},
			// 订单编号
			orderNo: {
				type: [String, Number],
				default: ''
			},
			// 发票状态
			invoiceState: {
				type: [String, Number],
				default: ''
			},
			invoiceType: {
				type: Number,
				default: 1
			},
			// 订单项目
			orderItems: {
				type: Array,
				default: () => []
			},
			checkbox: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {}
		},
		methods: {
			onClickNo(orderId,id) {
				this.$emit('clickNo', {
					orderId: orderId,
					id: id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gray {
		color: #787878;
	}

	.blue {
		color: #1E6CFF;
	}

	.orange {
		color: #F68B53;
	}

	.green {
		color: #1EC48A;
	}

	.red {
		color: #CF1A1B;
	}

	.order-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;

		.oi-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			padding: 0 32rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			font-size: 28rpx;
		}

		.oi-body {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			font-size: 28rpx;

			.images {
				display: flex;
				flex-direction: row;
				gap: 20rpx;

				.name {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>